<template>
<div class="app-container demochildren-container">
    <section class="page-box">
        <h1>Slot content extend Demo</h1>
        <hr>
        <div id="app">
            <jspang>
                <span slot="bolgUrl">{{jspangData.bolgUrl}}</span>
                <span slot="netName">{{jspangData.netName}}</span>
                <span slot="skill">{{jspangData.skill}}</span>
            </jspang>

        </div>

    </section>
</div>
</template>

<script>
// var jspang = {
//   template: '#tmp'
// }
export default {
  name: 'Demochildren',
  components: {
    jspang: {
      template: '<div id="tmp"><div><p>博客地址：<slot name="bolgUrl"></slot></p><p>网名：<slot name="netName"></slot></p><p>技术类型：<slot name="skill"></slot></p></div></div>'
    }
  },
  mounted() {},
  data() {
    return {
      jspangData: {
        bolgUrl: 'http://jspang.com',
        netName: '技术胖',
        skill: 'Web前端'
      }
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.demochildren-container {
    & .welcome-container .panel-body {
        background: #ffffff;
        padding-top: 10px;
        padding-bottom: 10px;
        margin-top: 20px;
        padding-left: 116px;

        & .table-footer {
            background: #ffffff;
        }
    }

    & .el-button+.el-button {
        margin-left: 0px;
        margin-bottom: 2px;
    }

    & .circle {
        height: 10px;
        width: 10px;
        border-radius: 10px;
    }
}
</style>
